<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>只能修改一次 html 元素内容</title>
</head>
<body>
<div id="change" class="change">
    <h1 data-once="info" style="background-color: red"></h1>
</div>

<script>
    let info = 'Hello, Vue'

    // 获取要修改的元素
    let element = document.querySelector("#change > h1");

    console.log(element);

    let once = false
    function modify_element() {
        if (!once) {
            // 修改状态
            once = !once

            let attribute = element.getAttribute("data-once");
            element.innerText = eval(attribute)

            element.removeAttribute('data-once')

        }
    }
    // 第一次调用，修改元素内容成功
    modify_element()

    // 修改变量的值
    info = 'Hello, World！'
    // 再次调用，无法修改元素内容
    modify_element()

</script>
</body>
</html>